<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021-03-07
  Time: 22:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <%@include file="/pages/common/head.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>

</head>
<body>
<%@include file="/pages/common/nev.jsp"%>
<div class="zoumadeng">
    走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!!   走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!!
</div>
<div class="main">
    <div class="cebianlan">
        <a href="#" class="list-group-item active">服务器</a>
        <a href="/index.php?r=home/index" class="list-group-item">服务器列表</a>
        <a href="/index.php?r=home/addfile" class="list-group-item">服务器增加</a>
        <a href="/index.php?r=home/download" class="list-group-item">服务器报告</a>
        <a href="#" class="list-group-item active">项目管理</a>
        <a href="/index.php?r=home/project" class="list-group-item">项目列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">项目增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">获取报告</a>
        <a href="#" class="list-group-item active">基础服务</a>
        <a href="/index.php?r=home/project" class="list-group-item">服务列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">服务增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">服务报告</a>
        <a href="#" class="list-group-item active">容器</a>
        <a href="/index.php?r=home/project" class="list-group-item">容器列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">容器增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">容器报告</a>
        <a href="#" class="list-group-item active">用户</a>
        <a href="/index.php?r=home/project" class="list-group-item">用户列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">用户增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">用户报告</a>
        <a href="#" class="list-group-item active">系统功能</a>
        <a href="/index.php?r=home/project" class="list-group-item">功能列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">功能建议</a>
        <a href="/index.php?r=home/getward" class="list-group-item">功能报告</a>
    </div>
    <div class="work" id="work">
        <div class="workHead">
            <div class="workHeadDescribe">服务器 / 服务器列表</div>
            <form class="workHeadForm" action="#">
                <input class="workHeadFormInput" type="text" placeholder="项目 / 服务器名 / ip片段"
                       autocomplete="on" name="searchKey"/>
                <input class="workHeadFormButton" type="button" value="so">
                <select class="workHeadFormSelect" id="workHeadFormSelect">
                    <option selected="selected">default</option>
                    <option>项目</option>
                    <option>服务器</option>
                    <option>ip</option>
                </select>
            </form>
            <button class="workHeadFileOut">导出</button>
        </div>
        <div class="workMain">
            <table class="workMainTable" id="workMainTable">
                <tr class="tr">
                    <th class="select">
                        <input type="checkbox" id="allSelecet">全选
                    </th>
                    <th class="num">序号</th>
                    <th class="id">ID</th>
                    <th class="name">主机名</th>
                    <th class="ip">IP</th>
                    <th class="function">操作</th>
                    <th class="note">备注</th>
                </tr>
                <tr class="tr">
                    <td class="select">
                        <input class="selectInput" type="checkbox">
                    </td>
                    <td class="num">1</td>
                    <td class="id">1</td>
                    <td class="name">济宁</td>
                    <td class="ip">1.1.1.1</td>
                    <td class="function">
                        <button>修改</button>
                    </td>
                    <td class="note">无</td>
                </tr>
                <tr class="tr">
                    <td class="select">
                        <input class="selectInput" type="checkbox">
                    </td>
                    <td class="num">1</td>
                    <td class="id">1</td>
                    <td class="name">济宁</td>
                    <td class="ip">1.1.1.1</td>
                    <td class="function">
                        <button>修改</button>
                    </td>
                    <td class="note">无</td>
                </tr>
                <tr class="tr">
                    <td class="select">
                        <input class="selectInput" type="checkbox">
                    </td>
                    <td class="num">1</td>
                    <td class="id">1</td>
                    <td class="name">济宁</td>
                    <td class="ip">1.1.1.1</td>
                    <td class="function">
                        <button>修改</button>
                    </td>
                    <td class="note">无</td>
                </tr>
                <tr class="tr">
                    <td class="select">
                        <input class="selectInput" type="checkbox">
                    </td>
                    <td class="num">1</td>
                    <td class="id">1</td>
                    <td class="name">济宁</td>
                    <td class="ip">1.1.1.1</td>
                    <td class="function">
                        <button>修改</button>
                    </td>
                    <td class="note">无</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<%--<jsp:include page="../common/cebianlan.jsp"></jsp:include>--%>
<%--<div id="box">--%>
<%--    <div id="start" class="target" >start</div>--%>
<%--    <div id="end" class="target">end</div>--%>
<%--    <div id="start2" class="target" >start2</div>--%>
<%--    <div id="end2" class="target">end2</div>--%>
<%--</div>--%>
<%--<jsp:include page="../common/cebianlan.jsp"></jsp:include>--%>
<%--<script>--%>

<%--    var startEle = document.getElementById('start');--%>
<%--    var endEle = document.getElementById('end');--%>

<%--    var startEle2 = document.getElementById('start2');--%>
<%--    var endEle2 = document.getElementById('end2');--%>

<%--    startEle.style.position="absolute"--%>
<%--    endEle.style.position="absolute"--%>
<%--    endEle.style.top=getTop(startEle)+startEle.clientHeight+2+"px"--%>
<%--    endEle.style.left=getLeft(startEle)+180+"px"--%>

<%--    startEle2.style.position="absolute"--%>
<%--    startEle2.style.left=startEle.style.left--%>
<%--    startEle2.style.top=endEle.style.top--%>

<%--    endEle2.style.position="absolute"--%>
<%--    endEle2.style.left=endEle.style.left--%>
<%--    endEle2.style.top=startEle.style.top--%>

<%--    let leader_line=f(startEle,endEle,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");--%>

<%--    const leader_line2 = f(startEle2, endEle2, kaishiyanse = '#ff3792', jieshuyanse = '#fff386', yanshi = "shixian");--%>

<%--    let leader_line3=f(startEle,endEle2,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");--%>

<%--    let boxObj=document.getElementById("box")--%>
<%--    boxObj.onmouseover=function (event) {//这个this是事件触发的元素--%>
<%--        if(event.target.classList.contains('target')){--%>
<%--            let add=document.createElement("div")--%>
<%--            add.style.position="absolute" //relative absolute--%>
<%--            add.style.left=event.target.offsetLeft+event.target.offsetWidth+"px"--%>
<%--            add.style.top=event.target.offsetTop+event.target.offsetHeight-30+"px"--%>
<%--            add.style.width=50+"px"--%>
<%--            add.style.height=30+"px"--%>
<%--            add.style.background="green"--%>
<%--            add.id=event.target.id+"AddId"--%>
<%--            add.innerHTML="create"--%>

<%--            boxObj.append(add)--%>
<%--        }--%>
<%--    }--%>
<%--    boxObj.onmouseout=function(event) {//这个this是事件触发的元素--%>
<%--        if(event.target.classList.contains('target')){--%>
<%--            var addEle = document.getElementById(event.target.id + "AddId");--%>
<%--            var x = event.clientX;--%>
<%--            var y = event.clientY;--%>
<%--            var divx1 = addEle.offsetLeft;  //距离边界的距离--%>
<%--            var divy1 = addEle.offsetTop; //距离边界的距离--%>
<%--            var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离--%>
<%--            var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离--%>
<%--            if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {--%>
<%--                //鼠标小于左上点横方向--%>
<%--                //鼠标大于右下点横方向--%>
<%--                //鼠标小于左上点竖方向--%>
<%--                //鼠标大于右下点竖方向--%>
<%--                //此时鼠标不在这个模块中--%>
<%--                //那就可以删除了--%>
<%--                boxObj.removeChild(addEle)--%>
<%--            } else {--%>
<%--                //否则,鼠标在这个addEle模块中--%>
<%--                //那就不删除--%>

<%--                addEle.onclick = function (event) {--%>
<%--                    let newDiv = document.createElement("div")--%>
<%--                    //获取当前对象的位置--%>
<%--                    var addDivX = this.offsetLeft--%>
<%--                    var addDivY = this.offsetTop--%>
<%--                    newDiv.style.position = "absolute"--%>
<%--                    newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"--%>
<%--                    newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"--%>
<%--                    newDiv.style.width = 50 + "px"--%>
<%--                    newDiv.style.height = 30 + "px"--%>
<%--                    newDiv.style.background = "#00FF00"--%>
<%--                    newDiv.id = this.id.replace("AddId", "") + "NewDiv"--%>
<%--                    newDiv.className="target"--%>

<%--                    boxObj.append(newDiv)--%>
<%--                    let newDivLeadLine=f(document.getElementById(this.id.replace("AddId", "")),newDiv,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");--%>
<%--                }--%>
<%--                addEle.onmouseout = function (event) {--%>
<%--                    event.cancelBubble=true;//事件取消冒泡--%>
<%--                    boxObj.removeChild(event.target)--%>
<%--                    // this.id.replace("AddId", "")--%>
<%--                    // let divObj = document.getElementById(this.id.replace("AddId", ""));--%>
<%--                    // console.log(divObj)--%>
<%--                    // let x = event.clientX;--%>
<%--                    // let y = event.clientY;--%>
<%--                    // let divx1 = divObj.offsetLeft;  //距离边界的距离--%>
<%--                    // let divy1 = divObj.offsetTop; //距离边界的距离--%>
<%--                    // let divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离--%>
<%--                    // let divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离--%>
<%--                    // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {--%>
<%--                    //     //移出了divObj,删除add模块--%>
<%--                    //     boxObj.removeChild(this)--%>
<%--                    // } else {//这说明,鼠标虽然移出了addDiv,但是马上进入了divObj区域内.说简单点就是,鼠标又回去了--%>
<%--                    //     //没移出divObj,不删除--%>
<%--                    // }--%>
<%--                }--%>
<%--            }--%>
<%--        }--%>
<%--        // var addEle = document.getElementById(event.target.id + "AddId");--%>
<%--        // var x = event.clientX;--%>
<%--        // var y = event.clientY;--%>
<%--        // var divx1 = addEle.offsetLeft;  //距离边界的距离--%>
<%--        // var divy1 = addEle.offsetTop; //距离边界的距离--%>
<%--        // var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离--%>
<%--        // var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离--%>
<%--        // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {--%>
<%--        //     //鼠标小于左上点横方向--%>
<%--        //     //鼠标大于右下点横方向--%>
<%--        //     //鼠标小于左上点竖方向--%>
<%--        //     //鼠标大于右下点竖方向--%>
<%--        //     //此时鼠标不在这个模块中--%>
<%--        //     //那就可以删除了--%>
<%--        //     boxObj.removeChild(addEle)--%>
<%--        //  } else {--%>
<%--        // //     //否则,鼠标在这个模块中--%>
<%--        // //     //那就不删除--%>
<%--        // //     addEle.onclick = function (event) {--%>
<%--        // //         let newDiv = document.createElement("div")--%>
<%--        // //         //获取当前对象的位置--%>
<%--        // //         var addDivX = this.offsetLeft--%>
<%--        // //         var addDivY = this.offsetTop--%>
<%--        // //         newDiv.style.position = "absolute"--%>
<%--        // //         newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"--%>
<%--        // //         newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"--%>
<%--        // //         newDiv.style.width = 50 + "px"--%>
<%--        // //         newDiv.style.height = 30 + "px"--%>
<%--        // //         newDiv.style.background = "#00FF00"--%>
<%--        // //         newDiv.id = this.id.replace("AddId", "") + "NewDiv"--%>
<%--        // //         document.body.append(newDiv)--%>
<%--        // //     }--%>
<%--        // //     addEle.onmouseout = function (event) {--%>
<%--        // //         this.id.replace("AddId", "")--%>
<%--        // //         var divObj = document.getElementById(this.id.replace("AddId", ""));--%>
<%--        // //         var x = event.clientX;--%>
<%--        // //         var y = event.clientY;--%>
<%--        // //         var divx1 = divObj.offsetLeft;  //距离边界的距离--%>
<%--        // //         var divy1 = divObj.offsetTop; //距离边界的距离--%>
<%--        // //         var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离--%>
<%--        // //         var divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离--%>
<%--        // //         if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {--%>
<%--        // //             //移出了divObj,删除add模块--%>
<%--        // //             document.body.removeChild(this)--%>
<%--        // //         } else {--%>
<%--        // //             //没移出divObj,不删除--%>
<%--        // //         }--%>
<%--        // //     }--%>
<%--        // }--%>
<%--    }--%>


<%--    // objs=document.getElementsByClassName("target")--%>
<%--    // for(var i in objs){--%>
<%--    //     //为每个div添加了add模块--%>
<%--    //     objs[i].onmouseover = function (){--%>
<%--    //         let add=document.createElement("div")--%>
<%--    //         add.style.position="absolute" //relative absolute--%>
<%--    //         add.style.left=this.offsetLeft+this.offsetWidth+"px"--%>
<%--    //         add.style.top=this.offsetTop+this.offsetHeight-30+"px"--%>
<%--    //         add.style.width=50+"px"--%>
<%--    //         add.style.height=30+"px"--%>
<%--    //         add.style.background="green"--%>
<%--    //         add.id=this.id+"AddId"--%>
<%--    //         add.innerHTML="create"--%>
<%--    //--%>
<%--    //         document.body.append(add)--%>
<%--    //--%>
<%--    //         // console.log("add图标的横坐标:"+add.style.left,"add图标的纵坐标:"+add.style.top)--%>
<%--    //         // console.log("大div的左上角坐标为:"+this.offsetLeft,this.offsetTop)--%>
<%--    //         // console.log("大div的宽度和高度是:"+this.offsetWidth,this.offsetHeight)--%>
<%--    //         // console.log("大div的右下角坐标为:"+(this.offsetLeft+this.offsetWidth),(this.offsetTop+this.offsetHeight))--%>
<%--    //         // console.log("小div的左上角坐标为:"+(this.offsetLeft+this.offsetWidth-10),(this.offsetTop+this.offsetHeight-10))--%>
<%--    //     }--%>
<%--    //     //当鼠标移出div模块时,add模块也随之消失;这里面有矛盾!--%>
<%--    //     //当鼠标移出div时,进入add模块后,add模块不应该消失--%>
<%--    //     //当鼠标移出div,并没有进入add模块时,add模块应该消失--%>
<%--    //         //关键点在于判断,移出div时,是否进入add模块--%>
<%--    //     objs[i].onmouseout=function(event){--%>
<%--    //         var addEle = document.getElementById(this.id+"AddId");--%>
<%--    //         var x=event.clientX;--%>
<%--    //         var y=event.clientY;--%>
<%--    //         var divx1 = addEle.offsetLeft;  //距离边界的距离--%>
<%--    //         var divy1 = addEle.offsetTop; //距离边界的距离--%>
<%--    //         var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离--%>
<%--    //         var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离--%>
<%--    //         if( x < divx1 || x > divx2 || y < divy1 || y > divy2){--%>
<%--    //             //鼠标小于左上点横方向--%>
<%--    //             //鼠标大于右下点横方向--%>
<%--    //             //鼠标小于左上点竖方向--%>
<%--    //             //鼠标大于右下点竖方向--%>
<%--    //             //此时鼠标不在这个模块中--%>
<%--    //             //那就可以删除了--%>
<%--    //             document.body.removeChild(addEle)--%>
<%--    //         }else{--%>
<%--    //             //否则,鼠标在这个模块中--%>
<%--    //             //那就不删除--%>
<%--    //             addEle.onclick=function (event) {--%>
<%--    //                 let newDiv=document.createElement("div")--%>
<%--    //                 //获取当前对象的位置--%>
<%--    //                 var addDivX = this.offsetLeft--%>
<%--    //                 var addDivY = this.offsetTop--%>
<%--    //                 newDiv.style.position="absolute"--%>
<%--    //                 newDiv.style.left=this.offsetLeft+this.offsetWidth+"px"--%>
<%--    //                 newDiv.style.top=this.offsetTop+this.offsetHeight+30+"px"--%>
<%--    //                 newDiv.style.width=50+"px"--%>
<%--    //                 newDiv.style.height=30+"px"--%>
<%--    //                 newDiv.style.background="#00FF00"--%>
<%--    //                 newDiv.id=this.id.replace("AddId", "")+"NewDiv"--%>
<%--    //                 document.body.append(newDiv)--%>
<%--    //             }--%>
<%--    //             addEle.onmouseout=function (event) {--%>
<%--    //                 this.id.replace("AddId", "")--%>
<%--    //                 var divObj = document.getElementById(this.id.replace("AddId", ""));--%>
<%--    //                 var x=event.clientX;--%>
<%--    //                 var y=event.clientY;--%>
<%--    //                 var divx1 = divObj.offsetLeft;  //距离边界的距离--%>
<%--    //                 var divy1 = divObj.offsetTop; //距离边界的距离--%>
<%--    //                 var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离--%>
<%--    //                 var divy2 = divObj.offsetTop +  divObj.offsetHeight; //右下点距离边界的距离--%>
<%--    //                 if( x < divx1 || x > divx2 || y < divy1 || y > divy2){--%>
<%--    //                     //移出了divObj,删除add模块--%>
<%--    //                     document.body.removeChild(this)--%>
<%--    //                 }else{--%>
<%--    //                     //没移出divObj,不删除--%>
<%--    //                 }--%>
<%--    //             }--%>
<%--    //         }--%>
<%--    //     }--%>
<%--    // }--%>
<%--</script>--%>
<script type="text/javascript" src=<%=basepath+"static/script/anim-event.js"%>></script>
<script type="text/javascript" src=<%=basepath+"static/script/jquery-3.6.0.min.js"%>></script>
<script type="text/javascript" src=<%=basepath+"static/script/leader-line.min.js"%>></script>
<script type="text/javascript" src=<%=basepath+"static/script/tools.js"%>></script>
<script type="text/javascript" src=<%=basepath+"static/script/event.js"%>></script>
<link rel="stylesheet" href=<%=basepath+"static/css/default.css"%>>
<script>
    let workObj=document.getElementById("work")
    workObj.style.width=(screen.width -158)+"px"
</script>
</body>
</html>